<template>
    <Modal v-model="visible" :title="title" @on-ok="ok" :mask-closable="false">
        <Form ref="form" :model="form" :rules="formRules" :label-width="100" onsubmit="return false">

            <FormItem label="项目名称" prop="name">
                <Input v-model="form.name"/>
            </FormItem>

            <FormItem label="公司名称" prop="company">
                <Input v-model="form.company"/>
            </FormItem>

            <FormItem label="手机号码" prop="telephone">
                <Input v-model="form.telephone"/>
            </FormItem>

            <FormItem label="姓名" prop="userName">
                <Input v-model="form.userName"/>
            </FormItem>

            <FormItem label="支付时间">
                <DatePicker  type="datetime" format="yyyy-MM-dd"
                             v-model="form.paytime">
                </DatePicker>
            </FormItem>

            <FormItem label="到期时间">
                <DatePicker  type="datetime" format="yyyy-MM-dd"
                             v-model="form.endtime">
                </DatePicker>
            </FormItem>

            <FormItem label="类型" prop="type" >
                <Select v-model="form.type">
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </FormItem>

            <FormItem label="地址" prop="ip">
                <Input v-model="form.ip"/>
            </FormItem>
        </Form>

        <div slot="footer">
            <Button type="text" size="large" @click.native="cancel">取消</Button>
            <Button type="primary" size="large" :loading="loading" @click.native="ok">确定</Button>
        </div>
    </Modal>
</template>

<script>
    import api from '../../api/index';
    import moment from 'moment';

    export default {
        props: ['getData'],
        data () {
            return {
                visible: false,
                loading: false,
                title: '',
                form: {},
                cityList:[],
                bankList:[],
                userList:[],
                projectList:[],
                statementsIndex: '',
                formRules: {
                    description: [
                        {required: true, message: '对方信息不能为空', trigger: 'blur'}
                    ],
                    information: [
                        {required: true, message: '备注不能为空', trigger: 'blur'}
                    ],
                    price: [
                        {required: true, message: '项目名不能为空', trigger: 'blur'}
                    ],

                }
                // parentAuthorities: []

            };
        },
        methods: {
            ok () {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        let request;
                        if (this.form.id) {

                            if (this.form.paytime !== '') {
                                this.form.paytime = moment(this.form.paytime).format('YYYY-MM-DD HH:mm:ss');
                            }

                            if (this.form.endtime !== '') {
                                this.form.endtime = moment(this.form.endtime).format('YYYY-MM-DD HH:mm:ss');
                            }

                            request = api.statementsUpdate(this.form);
                        } else {
                            request = api.statementsInsert(this.form);
                        }

                        request.then(data => {
                            this.loading = false;

                            if (data.code === 0) {
                                this.getData();
                                this.visible = false;
                            }
                        });
                    }
                });
            },
            open (title, id) {
                this.form = {};
                this.visible = true;
                this.title = title;
                this.form.id = id;
                console.log(id);
                console.log(this.form.id);

                if (id) {
                    api.statementsDetails({id: id}).then(data => {
                        if (data.code === 0) {
                            this.form = data.data;
                        }
                    });
                }
                this.getTypeList;
                this.getBankList;
                this.getUserList;
                this.getProjectList;
            },
            cancel () {
                this.visible = false;
            }
        },
        computed: {
            getTypeList () {
                this.cityList = [{value: 1, label: '启动'}, {value: 2, label: '欠费'}, {value: 3, label: '停止'} ];
            },
            getBankList () {
                api.bankList().then(data => {
                    if (data.code === 0) {
                        this.bankList = data.data;
                    }
                });
            },
            getUserList () {
                api.userList().then(data => {
                    if (data.code === 0) {
                        this.userList = data.data;
                    }
                });
            },
            getProjectList () {
                api.projectList().then(data => {
                    if (data.code === 0) {
                        this.projectList = data.data;
                    }
                });
            }
        }
    };
</script>
